<!--
 * @Author: gonghairun
 * @Date: 2020-11-19 10:16:14
 * @LastEditors: gonghairun
 * @LastEditTime: 2022-08-03 09:49:59
 * @Description: //预览表格组件
-->
<template>
	<div class="filesTable">
		<div style="display: flex; justify-content: flex-end">
			<el-button size="mini" @click="handlePreviewAll(attachmentList)" type="primary">一键预览</el-button>
		</div>
		<el-table :data="attachmentList" :max-height="400">
			<el-table-column width="200" property="fileName" label="文件名" show-overflow-tooltip></el-table-column>
			<el-table-column width="130" property="name" label="操作">
				<template slot-scope="scope">
					<div style="display: flex; align-items: center">
						<el-button size="mini" @click="handlePreview(scope.row)">预览</el-button>
						<el-button size="mini" @click="handleDownLoad(scope.row)">下载</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-drawer title="附件预览" :visible.sync="isShowFileP" size="80%" :append-to-body="true" :withHeader="false">
			<div class="fileTitle">附件预览</div>
			<el-carousel arrow="always" :height="carouselHeight + 'px'" :autoplay="false">
				<el-carousel-item v-for="(item, index) in previewFileList" :key="index">
					<div style="height: 40px; line-height: 40px">附件名称：{{ item.fileName }}</div>
					<iframe :src="item.url" :style="{ width: '100%', height: carouselHeight + 'px', border: 'none' }" />
				</el-carousel-item>
			</el-carousel>
		</el-drawer>
	</div>
</template>

<script>
import drawer from "@/components/BaseTable/drawer"
import config from "@/network/config.js"
export default {
	name: "filesTable",
	props: {
		attachmentList: {
			type: Array,
		},
	},
	components: {
		drawer,
	},
	data() {
		return {
			isShowFileP: false, // 是否显示一键预览弹窗
			previewFileList: [], // 一键预览数据源
			carouselHeight: window.innerHeight - 70, // 轮播图高度
		}
	},
	created() {},
	watch: {},
	mounted() {},
	methods: {
		/**
		 * @Author: gonghairun
		 * @description: 附件预览
		 * @param {*} argu
		 * @return {*}
		 */
		async handlePreviewAll(list) {
			this.isShowFileP = true
			// console.log(list)
			list.map(item => {
				item.url = `${config.ConfigBaseURL}/psys-preview-service/onlinePreview?url=${item.onlineURL}`
			})
			this.previewFileList = list
		},
		/**
		 * @Author: gonghairun
		 * @description: 附件预览
		 * @param {*} argu
		 * @return {*}
		 */
		async handlePreview(item) {
			console.log(item)
			let url = `${config.ConfigBaseURL}/psys-preview-service/onlinePreview?url=${item.onlineURL}`
			window.open(url)
		},
		/**
		 * @Author: gonghairun
		 * @description: 附件下载
		 * @param {*} argu
		 * @return {*}
		 */
		async handleDownLoad(argu) {
			const res = await this.$http
				.get(`/${this.$ServiceName}/api/external/protected/file/down?id=${argu.fileId}`, {
					responseType: "arraybuffer",
					params: {
						token: window.sessionStorage.getItem("token"),
					},
					timeout: 300000,
				})
				.then(res => {
					// console.log(res)
					const content = res.data
					const blob = new Blob([content]) // 构造一个blob对象来处理数据
					const link = document.createElement("a") // 创建a标签
					link.download = argu.fileName // a标签添加属性
					link.style.display = "none"
					link.href = URL.createObjectURL(blob, {
						type: `application/pdf`,
					})
					document.body.appendChild(link)
					link.click() // 执行下载
					URL.revokeObjectURL(link.href) // 释放url
					document.body.removeChild(link) // 释放标签
				})
				.catch(error => {})
		},
	},
}
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
